<template>
    <div class="content-box">
      <div ref="searchBox" class="search-box flex" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="130px"
        >
        <el-form-item
          label="查询时间"
          prop="dateRange"
        >
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              plain
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="handelDialog('添加', null)"
              >预警配置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
  
      <div class="table-box">
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="handleQuery"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <el-table
          v-sticky-header
          ref="table"
          v-loading="loading"
          :data="dataList"
        >
          <template v-for="(item,index) in columns">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="getColumnWidth(index)"
              align="center"
              :fixed="item.fixed"
              :sortable="item.sortable ? item.sortable : false"
              :show-overflow-tooltip="item.showTooltip"
              v-if="item.visible"
            >
            </el-table-column>
          </template>
        </el-table>
        <!-- 使用分页插件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 50, 100, 200, 500]"
          :page.sync="queryParams.pageIndex"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 新增与编辑折叠框 -->
      <el-drawer
        title="预警配置"
        :visible.sync="dialogShow"
        :with-header="true"
        :size="device === 'mobile'?'80%':'50%'"
        >
        <div class="drawer_content" style="padding:0 20px 20px;">
          <el-form :model="form" :rules="rules" label-width="140px" ref="formRef">
            <el-form-item prop="downBackRatio" label="回跳预警比例">
              <el-input-number 
                v-model="form.downBackRatio" 
                controls-position="right" 
                placeholder="请输入"
                :min="1" 
                :max="80" 
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="downNotifyRatio" label="回调预警比例">
              <el-input-number 
                v-model="form.downNotifyRatio" 
                controls-position="right" 
                placeholder="请输入"
                :min="1" 
                :max="80" 
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="downWarnCheck" label="下游未撞库(分钟)">
              <el-input-number 
                v-model="form.downWarnCheck" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="downWarnPush" label="下游未进件(分钟)">
              <el-input-number 
                v-model="form.downWarnPush" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="failOffNum" label="失败下线">
              <el-input-number 
                v-model="form.failOffNum" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="failSameRatio" label="同产品失败比例">
              <el-input-number 
                v-model="form.failSameRatio" 
                controls-position="right" 
                placeholder="请输入"
                :min="1"
                :max="80" 
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="failWarnNum" label="失败预警">
              <el-input-number 
                v-model="form.failWarnNum" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="upWarnCheck" label="上游未撞库(分钟)">
              <el-input-number 
                v-model="form.upWarnCheck" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item prop="upWarnPush" label="上游未进件(分钟)">
              <el-input-number 
                v-model="form.upWarnPush" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
          </el-form>
          <div class="drawer_footer" style="text-align: center;">
            <el-button type="primary" @click="handleSubmit('formRef')"
              >确 定</el-button
            >
            <el-button @click="handleClose">取 消</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import tableStickyMixins from "@/mixins/tableStickyMixins";
  import { mapGetters } from "vuex";
  import {
    addOrEdit,
    queryWarnConfig,
    queryProductWarnLogByPage,
  } from "@/api/globalConfig/productWarn";
  import moment from "moment";
  
  export default {
    // 定义名字用于标识该组件是否被keep-alive缓存
    name: "ProductWarn",
    data() {
      return {
        // 数据列表
        dataList: [],
        // 时间范围
        dateRange: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
        },
        loading: false,
        // 表格列信息
        columns: [
          {label: `预警时间`,prop: "warnTime",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `预警内容`,prop: "remarks",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
        ],
        // 显示搜索栏
        showSearch: true,
        // 抽屉弹框显示状态
        dialogShow: false,
        // 抽屉弹框的表单信息
        form: {},
        // 抽屉弹框表单校验规则
        rules: {
        },
        
      };
    },
    mixins: [tableStickyMixins],
    watch: {
      columns: {
        handler() {
          this.updateTableHeight();
        },
        deep: true,
      },
    },
    created() {
      // 设置默认时间范围
      this.$set(this, "dateRange", [
          moment().format("YYYY-MM-DD 00:00:00"),
          moment().format("YYYY-MM-DD 23:59:59"),
        ]);
      this.getList();
    },
    computed: {
      ...mapGetters(["sidebar", "device"]),
      // 计算当前列元素在所处环境的宽度
      getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
      },
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, "pageIndex", 1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // 完全重置到初始状态
        this.$set(this, "queryParams", {
          pageIndex: 1,
          pageSize: 10,
        });
        // 重置时间范围
        this.$set(this, "dateRange", [
          moment().format("YYYY-MM-DD 00:00:00"),
          moment().format("YYYY-MM-DD 23:59:59"),
        ]);
        this.getList();
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        if (this.dateRange?.length) {
          this.queryParams.createTimeStart = this.dateRange[0];
          this.queryParams.createTimeEnd = this.dateRange[1];
        }else{
          delete this.queryParams.createTimeStart
          delete this.queryParams.createTimeEnd
        }
        queryProductWarnLogByPage(this.queryParams).then((response) => {
          this.dataList = response?.data?.list
          this.total = response?.data?.total;
          this.loading = false;
        }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
        })
      },
      // 修改表格高度触发回调
      updateTableHeight() {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      // 处理对话框
      handelDialog(title, row = null) {
        // 获取预警配置信息
        queryWarnConfig().then((res) => {
          if (res.code === 200) {
            this.$set(this,'form', res.data)
            this.dialogShow = true;
          }
        });
      },
      /*关闭弹窗*/
      handleClose() {
        this.$refs["formRef"].resetFields();
        this.form = this.$options.data().form;
        this.dialogShow = false;
      },
      // 刷新数据且关闭弹框
      handleRefresh() {
        // 刷新数据
        this.getList();
        // 关闭弹窗
        this.handleClose();
      },
      /*提交操作*/
      handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {};
            params = JSON.parse(JSON.stringify(this.form));
            console.log(params);
            // 预警设置操作
            addOrEdit(params).then((res) => {
                 if (res.code === 200) {
                   this.$message.success("操作成功");
                   this.handleRefresh();
                 }
               });
          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
  }
  .search-box {
    margin: 0 0 20px;
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  </style>
  